<template>
  <div class="role-permission-system">
    <div class="header">
      <h1><i class="fas fa-user-shield"></i> 角色权限管理系统</h1>
      <button @click="showRoleForm" class="btn btn-primary">
        <i class="fas fa-plus"></i> 添加角色
      </button>
    </div>
    
    <div class="content">
      <!-- 左侧角色面板 -->
      <div class="role-panel">
        <div class="panel-header">
          <h2><i class="fas fa-users"></i> 角色列表</h2>
        </div>
        <div class="panel-content">
          <div 
            v-for="role in roles" 
            :key="role.id"
            class="role-item"
            :class="{ active: selectedRole && selectedRole.id === role.id }"
            @click="selectRole(role)"
          >
            <div class="role-icon">
              <i class="fas fa-user"></i>
            </div>
            <div class="role-info">
              <div class="role-name">{{ role.name }}</div>
              <div class="role-desc">{{ role.description }}</div>
            </div>
            <div class="role-actions">
              <button class="role-action" @click.stop="editRole(role)" title="编辑角色">
                <i class="fas fa-edit"></i>
              </button>
              <button class="role-action" @click.stop="deleteRole(role)" title="删除角色">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
          
          <div v-if="roles.length === 0" class="empty-state">
            <i class="fas fa-users" style="font-size: 40px; margin-bottom: 10px;"></i>
            <p>暂无角色数据</p>
          </div>
        </div>
      </div>
      
      <!-- 右侧菜单权限面板 -->
      <div class="menu-panel">
        <div class="panel-header">
          <h2>
            <i class="fas fa-list"></i> 菜单权限
            <span v-if="selectedRole" class="selected-role"> - {{ selectedRole.name }}</span>
          </h2>
          <div class="panel-actions">
            <button 
              class="btn btn-primary" 
              @click="savePermissions"
              :disabled="!selectedRole"
            >
              <i class="fas fa-save"></i> 保存权限
            </button>
            <button 
              class="btn btn-secondary" 
              @click="selectAllMenus"
              :disabled="!selectedRole"
            >
              <i class="fas fa-check-square"></i> 全选
            </button>
          </div>
        </div>
        <div class="panel-content">
          <div v-if="selectedRole" class="menu-tree">
             <div>菜单数据条数: {{ menuData.length }}</div>
            <div 
              v-for="menu in menuData" 
              :key="menu.id"
              class="menu-item"
            >
              <div class="menu-row">
                <label class="checkbox-container">
                  <input 
                    type="checkbox" 
                    :checked="isMenuChecked(menu.id)"
                    @change="toggleMenu(menu.id, $event.target.checked)"
                  >
                  <span class="checkmark"></span>
                  <span class="menu-name">
                    <i :class="menu.icon"></i> {{ menu.name }}
                  </span>
                </label>
              </div>
              
              <div v-if="menu.children && menu.children.length" class="menu-children">
                <div 
                  v-for="child in menu.children" 
                  :key="child.id"
                  class="menu-item child"
                >
                  <div class="menu-row">
                    <label class="checkbox-container">
                      <input 
                        type="checkbox" 
                        :checked="isMenuChecked(child.id)"
                        @change="toggleMenu(child.id, $event.target.checked)"
                      >
                      <span class="checkmark"></span>
                      <span class="menu-name">
                        <i :class="child.icon"></i> {{ child.name }}
                      </span>
                    </label>
                  </div>
                  
                  <div v-if="child.children && child.children.length" class="menu-children">
                    <div 
                      v-for="subChild in child.children" 
                      :key="subChild.id"
                      class="menu-item sub-child"
                    >
                      <div class="menu-row">
                        <label class="checkbox-container">
                          <input 
                            type="checkbox" 
                            :checked="isMenuChecked(subChild.id)"
                            @change="toggleMenu(subChild.id, $event.target.checked)"
                          >
                          <span class="checkmark"></span>
                          <span class="menu-name">
                            <i :class="subChild.icon"></i> {{ subChild.name }}
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div v-else class="empty-state">
            <i class="fas fa-hand-pointer" style="font-size: 40px; margin-bottom: 10px;"></i>
            <p>请选择一个角色以查看和编辑权限</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 角色表单模态框 -->
    <div v-if="showRoleModal" class="modal-overlay" @click="closeRoleModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ formMode === 'add' ? '添加角色' : '编辑角色' }}</h3>
          <button class="close-btn" @click="closeRoleModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>角色名称</label>
            <input type="text" v-model="roleForm.name" placeholder="请输入角色名称">
          </div>
          <div class="form-group">
            <label>角色描述</label>
            <textarea v-model="roleForm.description" placeholder="请输入角色描述" rows="3"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closeRoleModal">取消</button>
          <button class="btn btn-primary" @click="saveRole">
            {{ formMode === 'add' ? '添加' : '保存' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


import { getRoutes, getRoles, addRole, deleteRole, updateRole,getMenuList } from '@/api/role'
export default {
  name: 'RolePermissionSystem',
  data() {
    return {
      roles: [],
      selectedRole: null,
      menuData: [],
      showRoleModal: false,
      formMode: 'add', // 'add' 或 'edit'
      roleForm: {
        id: null,
        name: '',
        description: ''
      },
      nextRoleId: 4
    }
  },
   
  created() {
    // 所有角色获取
    this.getRoles()
    // 所有菜单获取
    this.getMenuList()
  },
  methods: {
    async getRoles() {
      const res = await getRoles()
      this.roles = res.data
    },
     async getMenuList() {
      const res = await getMenuList()
      this.menuData = res.data
      console.log("menuData==========.",this.menuData)
    },
    async getRoutes(id) {
      // const res = await getRoutes(id)
    },
    selectRole(role) {
      console.log("role>>>>.",role)
      this.selectedRole = role;
      // this. getRoutes(role.id)
    },
    
    showRoleForm() {
      this.formMode = 'add';
      this.roleForm = {
        id: null,
        name: '',
        description: ''
      };
      this.showRoleModal = true;
    },
    
    editRole(role) {
      this.formMode = 'edit';
      this.roleForm = {
        id: role.id,
        name: role.name,
        description: role.description
      };
      this.showRoleModal = true;
    },
    
    deleteRole(role) {
      if (confirm(`确定要删除角色 "${role.name}" 吗？`)) {
        const index = this.roles.findIndex(r => r.id === role.id);
        if (index !== -1) {
          this.roles.splice(index, 1);
          if (this.selectedRole && this.selectedRole.id === role.id) {
            this.selectedRole = null;
          }
        }
      }
    },
    
    saveRole() {
      if (!this.roleForm.name.trim()) {
        alert('角色名称不能为空');
        return;
      }
      
      if (this.formMode === 'add') {
        const newRole = {
          id: this.nextRoleId++,
          name: this.roleForm.name,
          description: this.roleForm.description,
          permissions: []
        };
        this.roles.push(newRole);
      } else {
        const role = this.roles.find(r => r.id === this.roleForm.id);
        if (role) {
          role.name = this.roleForm.name;
          role.description = this.roleForm.description;
        }
      }
      
      this.closeRoleModal();
    },
    
    closeRoleModal() {
      this.showRoleModal = false;
    },
    
    isMenuChecked(menuId) {
      if (!this.selectedRole) return false;
      return this.selectedRole.permissions.includes(menuId);
    },
    
    toggleMenu(menuId, checked) {
      if (!this.selectedRole) return;
      
      if (checked) {
        if (!this.selectedRole.permissions.includes(menuId)) {
          this.selectedRole.permissions.push(menuId);
        }
      } else {
        const index = this.selectedRole.permissions.indexOf(menuId);
        if (index !== -1) {
          this.selectedRole.permissions.splice(index, 1);
        }
      }
    },
    
    selectAllMenus() {
      if (!this.selectedRole) return;
      
      // 获取所有菜单ID
      const allMenuIds = [];
      const collectMenuIds = (menus) => {
        menus.forEach(menu => {
          allMenuIds.push(menu.id);
          if (menu.children) {
            collectMenuIds(menu.children);
          }
        });
      };
      
      collectMenuIds(this.menuData);
      this.selectedRole.permissions = [...allMenuIds];
    },
    
    savePermissions() {
      if (!this.selectedRole) return;
      
      // 在实际项目中，这里应该调用API保存权限
      alert(`角色 "${this.selectedRole.name}" 的权限已保存`);
      console.log('保存的权限:', this.selectedRole.permissions);
    }
  }
}
</script>

<style scoped>
.role-permission-system {
  width: 100%;
  height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
}

.header {
  background: linear-gradient(to right, #4b6cb7, #182848);
  color: white;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header h1 {
  font-size: 24px;
  font-weight: 600;
}

.content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.role-panel {
  width: 300px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}

.menu-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
}

.panel-header {
  padding: 20px;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h2 {
  color: #2c3e50;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.selected-role {
  color: #4b6cb7;
  font-weight: 500;
}

.panel-actions {
  display: flex;
  gap: 10px;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.role-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.role-item:hover {
  background-color: #f0f4f8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.role-item.active {
  background-color: #e3f2fd;
  border-color: #4b6cb7;
}

.role-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #4b6cb7;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-weight: bold;
}

.role-info {
  flex: 1;
}

.role-name {
  font-weight: 500;
  color: #2c3e50;
}

.role-desc {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.role-actions {
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.2s;
}

.role-item:hover .role-actions {
  opacity: 1;
}

.role-action {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.role-action:hover {
  color: #4b6cb7;
  background-color: #edf2f7;
}

.menu-tree {
  max-width: 600px;
}

.menu-item {
  margin-bottom: 5px;
}

.menu-item.child {
  margin-left: 20px;
}

.menu-item.sub-child {
  margin-left: 40px;
}

.menu-row {
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.menu-row:hover {
  background-color: #f5f7fa;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  color: #2c3e50;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  margin-right: 10px;
  position: relative;
  transition: all 0.2s;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #4b6cb7;
  border-color: #4b6cb7;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.menu-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.empty-state {
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
  font-style: italic;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background-color: #4b6cb7;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #3a5795;
}

.btn-secondary {
  background-color: #e0e0e0;
  color: #333;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #d1d1d1;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #6b7280;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: all 0.2s;
}

.close-btn:hover {
  background-color: #f5f5f5;
  color: #333;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #34495e;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus, .form-group textarea:focus {
  outline: none;
  border-color: #4b6cb7;
  box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.1);
}
</style> 